<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="coin" label="名称">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<img :src="scope.row.icon" alt="" class="w-[20px] h-[20px] mr-[5px]">
						<span class="text-[#333333] text-[14px] font-[400]">{{scope.row.coin}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="最新价(CNY)" />
			<el-table-column prop="address" label="24小时涨跌">
				<template #default="scope">
					<div :class="{'text-#F34E5F': !scope.row.up, 'text-#07B175': scope.row.up}">
						{{ scope.row.rate}}%
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作" align="right">
				<template #default="scope">
					<div class="text-16px text-#114CEE">
						交易
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script lang="ts" setup>
const tableData = ref<any[]>([
	{
		icon:'/purchase/btc.svg',
		coin:'BTC /USDT',
		price:'$ 0.00000000',
		up:false,
		rate:'-0.52',
	},
	{
		icon:'/purchase/btc.svg',
		coin:'BTC /USDT',
		price:'$ 0.00000000',
		up:false,
		rate:'-0.52',
	},
	{
		icon:'/purchase/btc.svg',
		coin:'BTC /USDT',
		price:'$ 0.00000000',
		up:false,
		rate:'-0.52',
	}
])
</script>
<style lang="scss" scoped></style>
